<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>门禁</title>
    <link rel="stylesheet" href="./layui/css/layui.css">

    <script src="./jquery.min.js"></script>
    <script src="./layui/layui.js"></script>

</head>
<script>
    currentgroupid = -1;
</script>

<body>
    <div id="逻辑区组树" style="float: left;width: 20%;"></div>
    <div style="float: right;width: 80%;">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn" onclick="reloadtable()">刷新</button>
            <button type="button" class="layui-btn" onclick="adddev()" id="addbutton">增加</button>

            <button type="button" class="layui-btn">编辑</button>


            <button type="button" class="layui-btn" onclick="deldev()">删除</button>
        </div>
        <div class="layui-btn-group" style="margin-left:50px;">
            <button type="button" class="layui-btn">设备开启</button>
            <button type="button" class="layui-btn">设备关闭</button>
        </div>
        <table id="逻辑设备表" lay-filter="test" style="float: right;"></table>

        <script>
            function reloadtable() {
                if (currentgroupid != -1) {

                    devtable('./物理设备测试数据.json?ID=' + currentgroupid);
                } else {
                    devtable('./物理设备测试数据.json');
                }
            }

            function adddev() {
                layer.open({
                    type: 2,
                    content: './新增人员iframe.html',
                    area: ['1000px', '500px']
                });
            }

            function editdev(devid) {
                layer.open({
                    type: 2,
                    content: './编辑设备iframe.html?devid=' + devid,
                    area: ['1000px', '500px']
                });
            }


            function history(id) {
                layer.open({
                    type: 2,
                    content: './历史iframe.html?ID=' + id + "&type=" + "门禁打卡",
                    area: ['1000px', '500px']
                });
            }

            function deldev() {
                var deldevarray = table.checkStatus('逻辑设备表').data;
                arrayid = [];
                for (i = 0; i < deldevarray.length; i++) {
                    arrayid[i] = deldevarray[i].id;
                }

                layer.confirm('确定要删除这些设备吗？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    //post删除设备请求

                    console.log(arrayid);
                    $.ajax({
                        type: "post",
                        url: "./删除设备接口/",
                        data: arrayid,
                        dataType: 'json',
                        async: true, //是否异步请求
                        success: function (data) {
                            //creatdevtree(data);
                            devtable('./物理设备测试数据.json?ID=' + currentgroupid);
                            console.log('./物理设备测试数据.json?ID=' + currentgroupid)
                        },
                        error: function () {
                            alert("网络异常！");

                        }
                    })

                    layer.close(index);
                });
            }

            function close() {
                layer.close(index);
                // return false;
            }
        </script>


        <script type="text/javascript">
            function creatdevtree(data) {
                layui.use('tree', function () {
                    var tree = layui.tree;
                    tree.render({
                        elem: '#逻辑区组树', //绑定元素
                        contentType: 'application/json',
                        data: data,
                        edit: [],
                        click: function (obj) {
                            document.getElementById('addbutton').textContent = "向<" + obj.data
                                .title + ">添加人员";
                            devtable('./物理设备测试数据.json?ID=' + obj.data.id);
                            currentgroupid = obj.data.id;
                        },
                    })
                })
            }

            $.ajax({
                type: "get",
                url: "./逻辑区组测试数据.json",
                dataType: 'json',
                async: true, //是否异步请求
                success: function (data) {
                    creatdevtree(data);
                }
            })
        </script>

        <script>
            function devtable(ajaxurl) {
                layui.use('table', function () {
                    table = layui.table;
                    //监听行双击事件
                    table.on('rowDouble(test)', function (obj) {
                        console.log(obj);
                        history(obj.data.id);

                    });

                    //监听排序事件 
                    table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                        console.log(obj.field); //当前排序的字段名
                        console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
                        console.log(this); //当前排序的 th 对象

                        //尽管我们的 table 自带排序功能，但并没有请求服务端。
                        //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
                        table.reload('idTest', {
                            initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                            , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                                field: obj.field //排序字段
                                , order: obj.type //排序方式
                            }
                        });

                        layer.msg('服务端排序。按照 ' + obj.field + '排， ' + obj.type);
                    });
                    //第一个实例
                    table.render({
                        elem: '#逻辑设备表',
                        height: 312,
                        autoSort: false,//禁用前端自动排序。
                        id:"idTest",
                        url: ajaxurl, //数据接口
                        loading: true,
                        page: true, //开启分页
                        type: "checkbox",
                        toolbar: true,
                        defaultToolbar: ['filter', 'print', 'exports'],
                        cols: [
                            [ //表头
                                {
                                    field: 'id',
                                    title: '设备ID',
                                    width: 50,
                                    sort: true,
                                    fixed: 'left',
                                    type: "checkbox"
                                }, {
                                    field: 'name',
                                    title: '设备名称',
                                    width: 110
                                }, {
                                    field: 'space',
                                    title: '所属空间',
                                    width: 110,
                                    sort: true
                                }, {
                                    field: 'state',
                                    title: '当前状态',
                                    width: 110,
                                    sort: true
                                }, {
                                    field: 'lastest',
                                    title: '最近一次开启时间',
                                    width: 180,
                                    sort: true
                                }

                            ]
                        ]
                    });

                });

            }
            devtable('./物理设备测试数据.json');
        </script>
</body>

</html>